<style lang="scss">
  @import "../../../assets/css/_variable";

  .clue-view .bread {
    height: 134px;
    background-color: $color-khan-blue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .clue-view .resume {
    height: 100px;
    margin: 1em 2em 1em 2em;
  }

  .clue-view .sub-list {
    list-style: none;
    padding: 0;
  }

  .clue-view .sub-list .item {
    height: 50px;
    width: 100%;
    background-color: $color-white;
    border: solid 1px $color-gray;
  }
</style>
<template>
  <div class="clue-view">
    <xy-header></xy-header>
    <div class="bread">
      <template v-if="root==='0'">
        <h1 class="color-white font-header">
          数学
        </h1>
      </template>
      <template v-else>
        <div class="color-extra-light-gray" @click="goToClue(node.parentClue.id)">
          <i class="el-icon-arrow-left"> </i> {{parent.name}}
        </div>
        <h1 class="color-white font-header">{{node.name}}</h1>
      </template>
    </div>
    <el-button-group class="width-100">
      <el-button class="width-50" type="success" @click="activeTab='sub'">探索</el-button>
      <el-button class="width-50" type="success" @click="activeTab='practice'">成就</el-button>
    </el-button-group>
    <template v-if="activeTab==='sub'">
      <div class="resume xy-card">
        <div>33%</div>
        <div>继续综合练习</div>
      </div>
    </template>
    <div class="sub-list">
      <template v-for="child in children">
        <div class="item" @click="goToChild(child)">
          {{child.name}}
        </div>
      </template>
    </div>

  </div>
</template>

<script>
  import XyHeader from '../sys/components/XyHeader.vue'

  export default {
    components: {
      XyHeader
    },
    data() {
      return {
        root: '0',
        node: {
          id: '',
          name: '',
          parentClue: {
            id: '',
            name: '',
          },
        },
        activeTab: 'sub',
        children: []
      }
    },
    computed: {
      parent() {
        if (this.node && this.node.parentClue) {
          return this.node.parentClue;
        }
        return {id: '', name: ''};
      }
    },
    methods: {
      clickTab(tab, event) {

      },
      load() {
        this.getClue();
        this.getChildren();
      },
      getClue() {
        let url = this.$store.state.app.api.el + 'clue/getClue';
        url += '?id=' + this.root;
        this.$http.get(url).then((data) => {
          this.node = data;
        });
      },
      getChildren() {
        let url = this.$store.state.app.api.el + 'clue/getChildren';
        url += '?parent=' + this.root;
        this.$http.get(url).then((data) => {
          //code 排序
          data.sort((a, b) => a.code > b.code ? 1 : -1);
          this.children = data;
        });
      },
      goToClue(id) {
        this.$router.push({name: '线索', query: {root: id}});
        this.root = id;
        this.load();
      },
      goToChild(child) {
        if (child.leaf) {
          this.$router.push({name: '叶子', query: {root: child.id}});
        } else {
          this.goToClue(child.id);
        }
      }
    },
    created() {
      this.root = this.$route.query['root'];
      this.load();
    },
    mounted() {

    },
    updated() {

    }
  }
</script>
